<template>
  <el-row style="background-color :#343a40;" type="flex" align="middle" justify="center">
    <el-col :span="4"></el-col>
    <el-col :span="16">
      <el-menu
          :default-active="active"
          mode="horizontal"
          background-color="#343a40"
          style="border-bottom: none !important;"
          text-color="#fff"
          active-text-color="#ffd04b">
        <el-menu-item>
          <el-image :src="logo" style="height: inherit;width: inherit;"></el-image>
        </el-menu-item>
        <el-menu-item index="home">
          <a href="/"><i class="el-icon-s-home"></i>首页</a></el-menu-item>
        <el-menu-item index="message" v-if="user!=null">
          <a href="/message">
            <i class="el-icon-chat-dot-round"></i>
            消息
            <el-badge :value="unreadMessageCount" class="item" :max="99" v-if="unreadMessageCount >0">
            </el-badge>
          </a>
        </el-menu-item>
        <el-menu-item index="registry" v-if="user==null">
          <a href="/registry"><i class="el-icon-s-check"></i>注册</a>
        </el-menu-item>
        <el-menu-item index="login" v-if="user==null">
          <a href="/login"><i class="el-icon-user"></i>登录</a>
        </el-menu-item>
        <el-menu-item index="nowcoder">
          <a href="https://www.nowcoder.com/" target="_blank"><i class="el-icon-guide"></i>去牛客网</a>
        </el-menu-item>
        <el-submenu index="admin" v-if="user!=null">
          <template slot="title">
            <el-avatar :src="user.headerUrl"></el-avatar>
          </template>
          <el-menu-item>
            <a href="/profile">
              <i class="el-icon-s-custom"></i>个人主页
            </a>
          </el-menu-item>
          <el-menu-item><i class="el-icon-s-tools"></i>账号设置</el-menu-item>
          <el-menu-item>
            <a @click="logout"><i class="el-icon-s-promotion"></i>退出登录</a>
          </el-menu-item>
        </el-submenu>
        <el-menu-item style="float:right;margin-left:-20px;">
          <el-button type="primary" @click="gotoSearch">搜索</el-button>
        </el-menu-item>
        <el-menu-item style="float:right;">
          <el-input
              placeholder="请输入内容"
              v-model="keyWords"
              clearable>
          </el-input>
        </el-menu-item>
      </el-menu>
    </el-col>
    <el-col :span="4"></el-col>
  </el-row>
</template>

<script>
export default {
  name: "Header",
  mounted() {
    this.getUserInfo();
    this.getUnreadConversationCount();
  },
  props: ['active'],
  data() {
    return {
      user: null,
      activeIndex: 'home',
      unreadMessageCount: 0,
      keyWords: '',
      logo: require('../assets/logo.png'),
    };
  },
  methods: {
    gotoSearch() {
      this.$router.push({
        path: '/search',
        query: {
          keyWords: this.keyWords
        }
      });
    },
    getUnreadConversationCount() {
      this.axios.get('/community/message/unreadConversationCount').then(response => {
        console.log('getUnreadConversationCount:', response);
        if (response.data.code === "00000") {
          this.unreadMessageCount = response.data.data.unreadConversationCount;
        } else {
          this.unreadMessageCount = 0;
        }
      }).catch(error => {
        console.log(error);
      });
    },
    getUserInfo() {
      this.axios.get('/community/userData').then(response => {
        console.log('userData:', response);
        if (response.data.code === "00000") {
          this.user = response.data.data.info;
          this.$emit('getUser', this.user);
        } else {
          this.user = null;
        }
      }).catch(error => {
        console.log(error);
      });
    },
    logout() {
      this.axios.get('/community/logout').then(response => {
        if (response.data.code === "00000") {
          this.$cookies.remove("token", '/community');
          this.$message.success({
            message: '退出登录成功,即将跳转到首页!',
            duration: 2000,
            onClose: () => {
              window.location.href = '/'
            }
          });
        } else {
          this.$message.error('退出登录失败!');
        }
      }).catch(error => {
        console.log(error);
      });
    }
  }
}
</script>

<style scoped>
.el-menu-item * {
  vertical-align: inherit !important;
}

a {
  text-decoration: none;
  color: white;
}
</style>
